<template>
    <div>
      <!-- <input type="text" :value="title" @input="updateTitle()"> -->
      <input type="text" v-model="title">
      <br>
        {{title}}
        {{age}}
        {{gender}}
        <br>
        <button @click="setTitle('abc')">setTitle</button>
        <button @click="setAge('23')">setAge</button>
        <button @click="setGender('girl')">setGender</button>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
      title:{
          get(){
              return this.$store.state.title;
          },
          set(value){
              this.setTitle(value);
          }
      },
    ...mapState(["title", "age", "gender"])
  },
  methods: {
    // updateTitle() {
    //   let val = event.target.value;
    //   this.$store.commit("setTitle", val);
    // },
    ...mapMutations(["setTitle", "setAge", "setGender"])
  }
};
</script>

